<template>
	<view class="card-page">
		<view class="header-bg" v-if="info.image" :style="{backgroundImage: `url(${hostApi+info.image})`}"></view>
		<view class="header-bg-default" v-else>
		</view>
		<view class=" content-wrapper">
			<view class="info-card">
				<view class="header">
					<img class="hospital-main-img" v-if="info.iconBig" :src="hostApi+info.iconBig" />
					<img class="hospital-main-img" v-else src="/static/images/hospital/width-logo.jpg" />
					<view class="level">
						<view></view>
						<view>{{info.level}}</view>
					</view>
				</view>
				<view class="info-item">
					<image src="/static/images/icon/address-icon.png" class="info-icon"></image>
					<text class="info-text">{{info.address}}</text>
				</view>
				<view class="info-item">
					<image src="/static/images/icon/phone-icon.png" class="info-icon"></image>
					<text class="info-text">{{info.phone}}</text>
				</view>
			</view>

			<view class="function-card">
				<view class="title-container">
					<view class="section-title">常用功能</view>
					<view class="title-bg"></view>
				</view>
				<view class="function-grid">
					<view class="function-item" v-for="(item, index) in menus" :key="index" @click="toPath(item.path)">
						<image class="function-icon" :src="`/static/images/icon/${item.img}`"></image>
						<text class="function-name">{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="intro-card">
				<view class="title-container">
					<view class="section-title">医院介绍</view>
					<view class="title-bg"></view>
				</view>
				<view class="intro-text">
					<u-parse :html="info.describe"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const menus = [{
			img: 'department-icon.png',
			path: '/pages/Introduce/departList',
			name: '科室介绍'
		},
		{
			img: 'doctor-icon.png',
			path: '/pages/Introduce/doctorList',
			name: '医生介绍'
		},
		{
			img: 'map-icon.png',
			path: '/pages/navInHsp/navInHsp',
			name: '院内地图'
		},
		{
			img: 'guide-icon.png',
			path: '/pages/Home/Notice/Index?type=3',
			name: '就医指南'
		},
		{
			img: 'feedback-icon.png',
			path: '/pages/Problems/Problems',
			name: '帮助与反馈'
		},
		{
			img: 'questionnaire-icon.png',
			path: '/pages/tabBar/Questionnaire/Index',
			name: '问卷调查'
		},
		{
			img: 'appraise-icon.png',
			path: '/pages/Introduce/MedicalEvaluation',
			name: '就诊评价'
		},
		{
			img: 'notice-icon.png',
			path: '/pages/Home/Notice/Index?type=1',
			name: '医院公告'
		},
	]
	export default {
		computed: {
			...mapGetters(['hostApi']),
		},
		data() {
			return {
				menus,
				info: {}
			}
		},
		onLoad(opt) {
			this.info = JSON.parse(opt.info)
			uni.setStorageSync("campusInfo", this.info);
		},
		methods: {
			toPath(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-page {
		position: relative;
		padding: 0rpx;
		height: 100%;
		background: #fff;
	}

	.header-bg {
		width: 100%;
		height: 400rpx;
		/* 固定高度 */
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.header-bg-default {
		width: 100%;
		height: 400rpx;
		/* 固定高度 */
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url('/static/images/campus/yq.jpg');
	}

	.content-wrapper {
		position: relative;
		margin-top: -180rpx;
		padding: 0 30rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.hospital-main-img {
		width: 70%;
		height: 70%;
		border-radius: 20rpx;
	}

	.level {
		background-image: url($mk-base+"/static/images/campus/hospital_level.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-left: 10px;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #35A6AF;
		text-align: center;
	}

	.info-card {
		background: #F5F9FF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		background: linear-gradient(#ffffff, #F2FBFC);
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}

	.info-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.info-text {
		font-size: 28rpx;
		color: #333;
	}

	.title-container {
		position: relative;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
	}

	.section-title {
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		z-index: 1;
	}

	.function-card {
		background: #fff;
		padding: 30rpx 0;
	}

	.title-bg {
		position: absolute;
		width: 68rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: -2rpx;
		left: 39rpx;
		z-index: 0
	}

	.function-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.function-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.function-icon {
		width: 80rpx;
		height: 80rpx;
	}

	.function-name {
		font-size: 24rpx;
		color: #666;
	}

	.intro-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.intro-text {
		font-size: 28rpx;
		color: #666;
		padding: 0 30rpx;
		line-height: 1.6;
	}
</style>